<template>
  <view class="page">
    <view class="page__title">注册</view>
    <view class="page__desc">欢迎使用{{ appConfig.name }}!</view>
    <view class="page__form">
      <view class="input-box">
        <tenant-select
          :show.sync="showTenantSelect"
          can-init
          :default-tenant-id="defaultTenantId"
        >
          <template #default="{ data }">
            <view @click="showTenantSelect = !showTenantSelect">
              <u-input
                readonly
                color="#386ee8"
                font-size="32rpx"
                :value="data.shortName"
                prefix-icon="https://ui-resourse.oss-cn-shenzhen.aliyuncs.com/picture/2022/04/02/wizVEmkhTXQafVFL.png"
                :prefix-icon-style="{
                  marginRight: '32rpx'
                }"
                placeholder="请选择区域"
                :placeholder-style="{
                  fontSize: '32rpx',
                  color: '#9E9E9E'
                }"
                border="none"
              >
                <template #suffix>
                  <view @tap="pwdShow = !pwdShow">
                    <u-icon name="arrow-down" size="36rpx" />
                  </view>
                </template>
              </u-input>
            </view>
          </template>
        </tenant-select>
      </view>
      <view class="input-box">
        <u-input
          v-model="phoneNumber"
          font-size="32rpx"
          prefix-icon="https://ui-resourse.oss-cn-shenzhen.aliyuncs.com/picture/2022/04/02/yugCDreSPKbjBbCI.png"
          :prefix-icon-style="{
            marginRight: '32rpx'
          }"
          :placeholder="`${
            getPhoneNumberFn.payload.canInput ? '请输入' : '请获取'
          }手机号`"
          :placeholder-style="{
            fontSize: '32rpx',
            color: '#9E9E9E'
          }"
          :readonly="!getPhoneNumberFn.payload.canInput"
          border="none"
        >
          <template #suffix>
            <view>
              <u-button
                text="获取手机号"
                color="#386ee8"
                size="small"
                open-type="getPhoneNumber"
                :loading="getPhoneNumberFn.payload.loading"
                @getphonenumber="getPhoneNumberFn"
              />
            </view>
          </template>
        </u-input>
      </view>
    </view>
    <view class="mt-70rpx">
      <u-button
        text="注册"
        color="#386ee8"
        :disabled="!phoneNumber"
        :throttle-time="600"
        @click="handleRegister"
      />
    </view>
    <view class="page__register">
      <text>已有账号？</text>
      <text @click="GoToLogin">去登录</text>
    </view>

    <view class="page__policy">
      <text>请阅读</text>
      <text @click="handleOpen(1)">《用户协议》</text>
      &
      <text @click="handleOpen(2)">《隐私政策》</text>
    </view>
  </view>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'

import TenantSelect from '@/components/tenant-select/tenant-select.vue'
import { useGetPhoneNumber } from '@/hook/getPhoneNumber'
import { useGlobalSetting } from '@/settings/system'
import { appStore } from '@/store/modules'
import { buildUrl, toPromise } from '@/utils'
import { showModal } from '@/utils/helper/uniHelper'

@Component({ name: 'Register', components: { TenantSelect } })
export default class Register extends Vue {
  get appConfig() {
    return useGlobalSetting()
  }
  public pwdShow = false

  public showTenantSelect = false

  get defaultTenantId() {
    return appStore.initDefaultTenant
  }

  public phoneNumber = ''

  get getPhoneNumberFn() {
    return useGetPhoneNumber((result, err) => {
      if (err) {
        return showModal({
          content: '获取手机号码失败，请手动填写！'
        })
      }
      this.phoneNumber = result.phoneNumber
    })
  }

  onLoad() {
    uni.hideHomeButton()
  }

  async handleRegister() {
    const { code } = await toPromise(uni.login, { provider: 'weixin' })
    const { wxAppId } = useGlobalSetting()
    try {
      // await registerAccount({
      //   code,
      //   mobile: this.phoneNumber,
      //   realName: `注册用户_${randomUUid(6)}`,
      //   wxAppId
      // })
      await showModal({
        title: '注册提示',
        content:
          '账户注册成功，默认登录密码为注册手机号后六位，您可在登录后修改登录密码！'
      })
      this.GoToLogin()
    } catch (e) {
      console.log(e)
    }
  }

  GoToLogin() {
    const needRedirect = getCurrentPages().length <= 1

    ;(needRedirect ? uni.redirectTo : uni.navigateTo)({
      url: './login'
    })
  }

  handleOpen(type: 1 | 2 = 1) {
    const { privacyUrl } = useGlobalSetting()
    if (!privacyUrl.length) return

    uni.navigateTo({
      url: buildUrl('/pages/webview/index', {
        url: privacyUrl[type - 1] ?? privacyUrl[0]
      })
    })
  }
}
</script>

<style lang="scss" scoped>
.page {
  @apply min-h-screen bg-white p-50rpx text-[#9e9e9e];

  &__title {
    @apply mt-26rpx text-48rpx text-[#333];
  }

  &__desc {
    @apply mt-36rpx text-32rpx;
  }

  &__form {
    @include gap-y(70rpx);
    @apply mt-179rpx flex flex-col;
  }

  &__register {
    @apply mt-50rpx text-center text-26rpx;

    text:last-child {
      @apply text-primary;
    }
  }

  &__policy {
    @apply fixed left-0 right-0 text-center text-24rpx;
    bottom: calc(44rpx + $bs-height);

    text:not(:first-child) {
      @apply text-primary;
    }
  }
}

.input-box {
  @apply pb-16rpx;
  border-bottom: 2rpx solid #f6f6f6;
}
</style>
